<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        /*
            1. 介绍js有哪些内置对象 (内置对象其实就是构造函数，不要被唬到了)?
                ● 数据封装类对象:Object、Array、Boolean、Number、String
                ● 其他对象:Function、Arguments、Math、Date、RegExp、ErrorI
                ● ES6新增对象:Symbol (标识唯一性的ID) 、Map、Set、Promises、Proxy、Reflect

            2. 如何最小化重绘(repaint)和回流(reflow)
                - 需要要对元素进行复杂的操作时，可以先隐藏(display."none")，操作完成后再显示
                - 需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document
                - 缓存Layout属性值，如: var left = elem.offsetLeft;这样，多次使用left只产生一次回流
                - 尽量避免用table布局(table元素一旦触发回流就会导致table里所有的其它元素回流)

            3. js的作用域链?
                - 全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节
                - ·如果当前作用域没有找到属性或方法，会向上层作用域[[Scoped]]查找，直至全局函数，这种形式就是作用域链   
            
            4. 数据请求
                4-1 xhr请求
                    var xhr = new XMLHttpRequest();
                    xhr.open('get', 'www.xxxx.com', true);//请求的方法，请求的地址，是否异步
                    xhr.send();//发送请求
                    xhr.onreadystatechange = function () {
                    if(xhr.readyState == 4){// readState为4则代表请求已经返回来了
                        if(xhr.status >= 200 && xhr.status<= 300){//status在200到300，则代表请求是成功的

                        }
                    }
                    // 200成功(有可能强缓存策略，cache-contlo1 , expired)
                    // 301 302 redirect
                    // 304 从缓存读取数据.(协商缓存策略,etag)
                    // 404 not found
                    // 500 服务器错误
                    }
                    xhr.abort();//使用abort()可以终止请求, 所以xhr是可以取消的.
                4-2 fetch
                    fetch('url',{method:'post',body:"",credentials:'include'})//请求的地址，method和body不做解释，credentials表示请求是否带cookie，默认不带，include表示带cookie
                    .then(res=>res.json())//注意这一步是必须的，他会返回一个json格式的promise对象，下一步的then才能正常拿到数据
                    .then(res=>console.log(res));
            
                4-3 jsonp解决跨域
                    因为script标签的src属性不会有跨域限制
                    后端返回的数据格式一定是，test('["111","222","333"]');
                    前提是一定要先定义好test这个方法，通过形参就拿到数据了。
                    但是jsonp可以做get请求，做不了post请求
                    且jsonp不能取消

                    举个例子, 因为jsonp利用的是script标签，所以到时后端肯定给你的是js语句，而不是直接的数据，比如到时后端返回给你这段js代码: test([1,2,3,4]);
                    这个时候你想拿到数据，就需要你提前在js中写上function test(res){...}, 这样就可以拿到后端真正返回给你的数据了。至于test叫什么，那就需要你和后端提前协商好

            5. 跨域和同源策略
                所谓的同源策略其实是浏览器的一种机制，只允许在同源，也就是同协议、同域名、同端口的的情况下才能进行数据交互。但是我们在开发项目的过程中，往往一个项目的接口不止一个域，所以往往就需要做跨域的处理，通常的跨域方式有这么几种:
                    - JSONP，主要依赖的是script标签不受同源策略影响，src指向某一个接口的地址，同步需要传递callback回调函数名字，这样当接口调用成功后，本地创建的全局回调函数就会执行，并且接收到数据。不使用img标签的原因是因为img标签无法执行js语句
                    - CORS，依赖服务端对前端的请求头信息进行放行，不做限制。
                        Access-Control-Allow-Origin:'*'
                    - 代理访问，前端访问不存在跨域问题的代理服务器，代理服务器再去访问目标服务器(服务器之间没有跨域限制)
        */
       
    </script>
</body>

</html>